<template>
    <div class="header-con">
        <div class="header-left-con">
            <div class="fold-btn" @click="toggle(collapsed)">
                <img src='../assets/img/unfold.png' v-if='collapsed' />
                <img src='../assets/img/toggle.png' v-else />
            </div>
            <div class="breadcrumb-con">
                <Breadcrumb></Breadcrumb>
            </div>
        </div>
        <div class="right-con">
            <div class="refresh right-icon" @click='refresh()'>
                <i class="el-icon-refresh-right"></i>
            </div>
            <div class="fullscreen right-icon" @click='toggleFullScreen'>
                <img src='../assets/img/full.png' v-if='!isFullScreen' />
                <img src='../assets/img/no-full.png' v-else />
            </div>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    {{ adminInfo.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="supply_info">供应商信息</el-dropdown-item>
                    <el-dropdown-item command="edit_pwd">修改密码</el-dropdown-item>
                    <el-dropdown-item command="exit">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
import screenfull from 'screenfull';
import Breadcrumb from './Breadcrumb.vue'
import { loginOut, adminInfo } from '../api/login';
export default {
    name: 'navcon',
    // 注册组件
    components: {
        Breadcrumb,
    },
    data() {
        return {
            collapsed: true,
            user: {},
            isFullScreen: false,
            adminInfo: {}
        }
    },
    // 创建完毕状态(里面是操作)
    created() {
        this.getAdminInfo()
    },
    methods: {
        getAdminInfo() {
            adminInfo().then(res => {
                if (res.code == 0) {
                    this.adminInfo = res.data;
                    this.$store.commit("SET_ADMIN_INFO", res.data);
                    localStorage.setItem('COMPANYID',res.data.company_id)
                }
            })
        },
        refresh() {
            this.$router.go(0)
            // location.reload()
            // window.location.reload()
        },
        toggleFullScreen() {
            // 判断当前浏览器是否支持全屏
            if (screenfull.isEnabled) {
                //当前页面是否全屏
                if (!screenfull.isFullscreen) {
                    this.isFullScreen = !this.isFullScreen
                    screenfull.request()
                } else {
                    this.isFullScreen = !this.isFullScreen
                    screenfull.exit()
                }
            } else {
                //提醒 无法全屏浏览
                this.$message({
                    message: '你的浏览器不支持全屏',
                    type: 'warning'
                })
            }
        },
        // 切换显示
        toggle(showtype) {
            console.log('111', this.$store.state.isMobile)
            if (this.$store.state.isMobile) {
                this.$emit('openDrawer')
            } else {
                this.collapsed = !showtype
                this.$root.Bus.$emit('toggle', this.collapsed)
            }
        },
        handleCommand(e) {
            if(e == 'supply_info'){
                this.$router.push('/personal/supply_info')
            }else if (e == 'edit_pwd') {
                this.$router.push('/personal/edit_pwd')
            } else {
                this.$msgbox({
                    title: '消息',
                    message: "此操作将退出登录, 是否继续",
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '退出中...';
                            loginOut().then(res => {
                                if (res.code == 0) {
                                    instance.confirmButtonLoading = false;
                                    instance.confirmButtonText = '确定';
                                    localStorage.removeItem('Supply-Access-Token');
                                    localStorage.removeItem('X-Csrf-Token');
                                    this.$message.success('退出成功')
                                    setTimeout(() => {
                                        this.$router.replace('/login');
                                    }, 1000)
                                    done();
                                } else {

                                }
                            })
                        } else {
                            done();
                        }
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
.header-con {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left-con {
    display: flex;
    align-items: center;
}

.fold-btn {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    cursor: pointer;
    opacity: 0.8;
}

.fold-btn:hover {
    opacity: 1;
}

.fold-btn img {
    width: 100%;
}

.right-con {
    height: 50px;
    display: flex;
    align-items: center;
}

.right-icon {
    padding: 0 10px;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.right-icon:hover {
    background-color: aliceblue;
}

.fullscreen {
    width: 20px;
}

.fullscreen img {
    width: 20px;
    height: 20px;
}

.el-dropdown-link {
    cursor: pointer;
}

.refresh i {
    font-size: 16px;
}
</style>